<style scoped></style>

<template>
    <div>
        <Modal
            title="添加小区"
            :value="value"
            @on-ok="save"
            @on-visible-change="visibleChange"
            width="800"
        >
            <Form
                ref="villageForm"
                label-position="top"
                :rules="villageRole"
                :model="village"
            >
                <Row :gutter="16">
                    <Col span="18">
                        <FormItem label="小区名称" prop="name">
                            <Input
                                v-model="village.name"
                                :maxlength="32"
                            ></Input>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem
                            label="所属地区"
                            style="width: 100%"
                            prop="regionId"
                        >
                            <RegionSelect
                                v-model="village.regionId"
                            ></RegionSelect>
                        </FormItem>
                    </Col>
                </Row>
                <Row :gutter="16">
                    <Col span="6">
                        <FormItem label="占地面积" prop="coveredArea">
                            <Input-number  :min="1" v-model="village.coveredArea"></Input-number> ㎡
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="建筑面积" prop="builtArea">
                            <Input-number  :min="1" v-model="village.builtArea"></Input-number> ㎡
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="容积率" prop="volume">
                            <Input
                                v-model="village.volume"
                                placeholder="1.02"
                            >
                            </Input>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="绿化率" prop="greenRate">
                            <Input
                                v-model="village.greenRate"
                                placeholder="30.5"
                            >
                                <span slot="append">%</span>
                            </Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row :gutter="16">
                    <Col span="6">
                        <FormItem label="规划车位" prop="planParkCount">
                            <Input
                                v-model="village.planParkCount"
                                :maxlength="32"
                                placeholder="地下888个"
                            ></Input>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="车位配比" prop="parkRatio">
                            <Input
                                v-model="village.parkRatio"
                                :maxlength="32"
                                placeholder="1:2"
                            ></Input>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="规划楼栋" prop="planFloorCount">
                            <Input-number  :min="1" v-model="village.planFloorCount"></Input-number> 栋
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="规划户数" prop="planFamilyCount">
                            <Input-number :min="1" v-model="village.planFamilyCount"></Input-number> 户
                        </FormItem>
                    </Col>
                </Row>
                <Row :gutter="16">
                    <Col span="18">
                        <FormItem label="物业公司" prop="propertyCompany">
                            <Input
                                v-model="village.propertyCompany"
                                :maxlength="32"
                            ></Input>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="物业费" prop="propertyFee">
                            <Input v-model="village.propertyFee" :maxlength="32" placeholder="2.8元/㎡"></Input>
                        </FormItem>
                    </Col>
                </Row>
                <Row :gutter="16">
                    <Col span="6">
                        <FormItem label="供暖方式" prop="heating">
                            <Input v-model="village.heating" :maxlength="32" placeholder="集中供暖"></Input>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="供水" prop="water">
                            <Input v-model="village.water" :maxlength="32" placeholder="民水"></Input>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="供电" prop="electric">
                            <Input v-model="village.electric" :maxlength="32" placeholder="民电"></Input>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
            <div slot="footer">
                <Button @click="cancel">{{ L("Cancel") }}</Button>
                <Button @click="save" type="primary">{{ L("OK") }}</Button>
            </div>
        </Modal>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator";
import Util from "@/lib/util";
import AbpBase from "@/lib/abpbase";
import Village from "@/store/entities/estate/Village";
import RegionSelect from "@/components/region-select.vue";
@Component({
    components: { RegionSelect },
})
export default class extends AbpBase {
    @Prop({ type: Boolean, default: false }) value: boolean;

    village: Village = new Village();

    editorBlur(filedName) {
        (this.$refs.villageForm as any).validateField(filedName);
    }
    save() {
        //console.log(this.village);
        (this.$refs.villageForm as any).validate(async (valid: boolean) => {
            if (valid) {
                let ret = await this.$store.dispatch({
                    type: "village/create",
                    data: this.village,
                });
                this.village = new Village();

                setTimeout(() => {
                    (this.$refs.villageForm as any).resetFields();
                }, 1000);

                this.$emit("save-success", ret.data.result);
                this.$emit("input", false);
            }
        });
    }
    cancel() {
        (this.$refs.villageForm as any).resetFields();

        this.$emit("input", false);
    }
    visibleChange(value: boolean) {
        if (!value) {
            this.$emit("input", value);
        }
    }

    villageRole = {
        name: [
            {
                required: true,
                message: "请输入小区名称",
                trigger: "blur",
            },
            {
                type: "string",
                max: 32,
                message: "最长不得超过32个字符",
                trigger: "blur",
            },
        ],
        planParkCount: [
            {
                type: "string",
                max: 32,
                message: "最长不得超过32个字符",
                trigger: "blur",
            },
        ],
        parkRatio: [
            {
                type: "string",
                max: 32,
                message: "最长不得超过32个字符",
                trigger: "blur",
            },
        ],
        propertyCompany: [
            {
                type: "string",
                max: 32,
                message: "最长不得超过32个字符",
                trigger: "blur",
            },
        ],
        propertyFee: [
            {
                type: "string",
                max: 32,
                message: "最长不得超过32个字符",
                trigger: "blur",
            },
        ],
        heating: [
            {
                type: "string",
                max: 32,
                message: "最长不得超过32个字符",
                trigger: "blur",
            },
        ],
        water: [
            {
                type: "string",
                max: 32,
                message: "最长不得超过32个字符",
                trigger: "blur",
            },
        ],
        electric: [
            {
                type: "string",
                max: 32,
                message: "最长不得超过32个字符",
                trigger: "blur",
            },
        ]
    };
}
</script>